<script setup>
  import {
    Card,
    CardMeta,
    Link,
    Divider,
    Image,
    List,
    ListItem,
    // ListItemMeta,
    Row,
    Col,
    Button,
    Tag,
    // Tabs,
    // TabPane,
    Avatar,
  } from '@arco-design/web-vue';

  import { IconStarFill } from '@arco-design/web-vue/es/icon';
  const Tags = [
    {
      id: 1,
      name: 'Javascript',
    },
    {
      id: 2,
      name: 'Solidity',
    },
    {
      id: 3,
      name: 'TypeScript',
    },
    {
      id: 4,
      name: 'DeFi',
    },
  ];
  const avatarUrl =
    'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp';
</script>
<template>
  <div class="w-full bg-[#f8f8f8]">
    <div class="p-[12px] box-border">
      <div class="w-[calc(100%-80px)] flex relative mx-[40px]">
        <div class="center flex-1 min-h-[calc(100vh-13rem-1240px)] w-[calc(100%-430px)]">
          <Card :bordered="false" :hoverable="true" class="mb-[10px]">
            <Row class="flex items-center">
              <Col :span="8" class="text-[28px] font-bold">Solidity</Col>
              <Col :span="16" class="text-right">
                <Button type="primary">申请岗位</Button>
              </Col>
            </Row>
            <Divider />
            <Row>
              <Col class="mb-4 font-bold text-[18px]">职位描述</Col>
              <Col class="mb-4">
                <Tag v-for="item of Tags" :key="item.id" class="mr-10">{{ item.name }}</Tag>
              </Col>
            </Row>

            <Row>
              <div
                class="w-full text-[#333] text-[15px] text-justify whitespace-pre-wrap break-all my-[20px] leading-[28px] tracking-normal"
              >
                岗位职责
                <br />
                •负责公司客户项目智能合约的开发、调试与部署，根据客户需求完成开发，测试，部署及交付流程；
                <br />
                •负责智能合约的维护、统计和分析等工作； •配合前端及团队完成整个项目的开发； 岗位要求
                <br />
                •1-3年Solidity智能合约开发经验； •具有丰富的NFT/Defi/dApps等项目开发经验；
                <br />
                •熟悉Hardhat、Remix等开发测试、部署工具;深入了解EVM、熟悉OpenZeppelin等第三方安全合约库；
                <br />
                •有较强的逻辑思维能力，及较强的学习能力、良好的代码习惯；
                <br />
                •具备良好远程团队合作精神，自觉保证工作质量，支持项目开发需求；
              </div>
            </Row>
            <Row>
              <Col class="mb-4 font-bold text-[18px]">福利待遇</Col>
            </Row>
            <Row>
              <div
                class="w-full text-[#333] text-[15px] text-justify whitespace-pre-wrap break-all my-[10px] leading-[28px] tracking-normal"
              >
                30K-50K，签劳动合同；人民币结算；缴纳五险
              </div>
            </Row>
            <Row>
              <Col class="mb-4 font-bold text-[18px]">工作方式以及语言</Col>
            </Row>
            <Row>
              <div
                class="w-full text-[#333] text-[15px] text-justify whitespace-pre-wrap break-all my-[10px] leading-[28px] tracking-normal"
              >
                工作方式：全职远程，在线时间灵活，时区要求灵活
                <br />
                工作语言：英文听说读写流利
              </div>
            </Row>
            <Row>
              <Col class="mb-4 font-bold text-[18px]">录用流程</Col>
            </Row>
            <Row>
              <div
                class="w-full text-[#333] text-[15px] text-justify whitespace-pre-wrap break-all my-[10px] leading-[28px] tracking-normal"
              >
                三轮面试+代码能力测试，一个工作日内给到反馈
              </div>
            </Row>
          </Card>
          <!-- <Card
            v-for="item of 20"
            :key="item"
            :bordered="false"
            :hoverable="true"
            class="mb-[10px]"
          >
            <Row class="mb-[10px]">
              <Col :span="4" class="flex items-center justify-center">
                <Image :src="avatarUrl" />
              </Col>
              <Col :span="20" class="pl-6 box-border">
                <Row>
                  <Col :span="2">
                    <Avatar :image-url="avatarUrl" />
                  </Col>
                  <Col :span="4" class="overflow-hidden whitespace-nowrap text-ellipsis">
                    铭泽@极星社区
                  </Col>
                  <Col :span="3"> 2023年1月4日 </Col>
                  <Col :span="15" class="text-right"> 10分钟阅读 </Col>
                </Row>
                <Row class="my-4">
                  <Col
                    :span="24"
                    class="max-h-[78px] text-[24px] font-bold text-black overflow-clip"
                  >
                    身负重任 不忘初心 —— 联合国人道副秘书长 洛科克离任前专访
                  </Col>
                </Row>
                <Row class="mb-4">
                  <Col
                    :span="24"
                    class="max-h-[104px] text-[16px] text-[#101010] overflow-ellipsis overflow-hidden"
                  >
                    在h5开发中，我们经常会需要实现一些动效来让页面视觉效果更好，谈及动效便不可避免地会想到动效性能优化这个话题:
                    减少页面DOM操作，可以使用CSS实现的动效不多出一行js代码
                    使用绝对定位脱离让DOM脱离文档流，减少页面的重排(relayout)...
                  </Col>
                </Row>
                <Row class="h-[34px]">
                  <Col :span="4">
                    <Button shape="round">
                      <Avatar :image-url="avatarUrl" :size="26" class="mr-2" />
                      SeeDAO . 个人
                    </Button>
                  </Col>
                  <Col :span="20" class="h-full flex justify-end items-center">
                    <div class="mr-10">
                      <span class="mr-2">1999</span>
                      <span>浏览</span>
                    </div>
                    <div>
                      <span class="mr-2">99</span>
                      <span>收藏</span>
                    </div>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Card> -->
        </div>
        <div class="rightt w-[430px] ml-[18px]">
          <!-- 远程岗位推荐 -->
          <card class="hot-topic-block mb-[10px]" hoverable :bordered="false">
            <card-meta title="编辑精选">
              <template #description>
                <divider style="margin: 0" />
                <List :bordered="false" :split="false" class="pt-2">
                  <list-item v-for="idx in 4" :key="idx" class="w-full !px-0 !py-2">
                    <div class="overflow-hidden w-full cursor-pointer">
                      <Row class="w-full flex items-center">
                        <Col :span="3">
                          <Avatar :image-url="avatarUrl" :size="32" />
                        </Col>
                        <Col :span="16"> 铭泽@极星社区 在<Link href="#">前端栏目</Link>发表了 </Col>
                        <Col :span="5"><IconStarFill class="text-yellow-400" /> 付费 </Col>
                      </Row>
                      <Row class="w-full flex items-center my-4">
                        <Col class="text-[20px] text-[#101010] truncate"
                          >DAO 行业2022年 行业洞察报告行业洞察报告行业洞察报告
                        </Col>
                      </Row>
                    </div>
                  </list-item>
                </List>
                <div class="w-full text-center">
                  <Button type="primary">查看更多</Button>
                </div>
              </template>
            </card-meta>
          </card>
          <!-- 远程岗位推荐 -->
          <!-- 广告区 -->
          <card class="ad-block mb-[10px]" hoverable :bordered="false">
            <template #cover>
              <div
                :style="{
                  height: '192px',
                  overflow: 'hidden',
                }"
              >
                <Image
                  width="100%"
                  height="100%"
                  fit="cover"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                />
              </div>
            </template>
          </card>
          <!-- 广告区 -->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .nav-tabs >>> .arco-tabs-content {
    padding: 0;
  }

  .user-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ad-block >>> .arco-card-body {
    padding: 0 !important;
  }

  .hot-topic-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hot-topic-title-more {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .hot-topic-block >>> .arco-list-item-main {
    width: 100%;
  }

  .select-block >>> .arco-list-item-meta,
  .select-block >>> .arco-list-item-meta-content,
  .select-block >>> .arco-list-item-meta-title {
    height: 100%;
  }

  .select-block >>> .arco-list-item-meta-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .select-block >>> .arco-list-item-content {
    height: calc(100% - 30px);
  }

  .select-block >>> .arco-list-item-action {
    height: 30px;
    line-height: 30px;
  }

  .select-block >>> .arco-list-item-main {
    height: 80px !important;
    padding-right: 6px;
    box-sizing: border-box;
  }
</style>
